<template>
  <div class="modal-viewer-container">
    <h1>模态框效果查看器</h1>
    <p>点击下方按钮查看对应的模态框效果。</p>

    <el-row :gutter="20" class="button-grid">
      <el-col :span="6">
        <el-button type="primary" @click="openModal('NewUserModal')"
          >创建用户模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('EditUserModal')"
          >编辑用户模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('NewRoleModal')"
          >新建角色模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('EditRoleModal')"
          >编辑角色模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('RoleManagementModal')"
          >角色管理模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('RolePermissionModal')"
          >角色权限模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('AddCourseModal')"
          >添加课程模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('EditCourseModal')"
          >编辑课程模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('NewAssessmentModal')"
          >新建考核模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('QuestionBankModal')"
          >题库管理模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('NewPlanModal')"
          >新建培训计划模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('EditPlanModal')"
          >编辑培训计划模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('ViewPlanModal')"
          >查看培训计划模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('TemplateModal')"
          >计划模板管理模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('LogDetailModal')"
          >日志详情模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('PostDetailModal')"
          >帖子详情模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('ErrorReportModal')"
          >错误报告模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('SubmitConfirmModal')"
          >提交确认模态框
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="openModal('FilterModal')"
          >筛选模态框
        </el-button>
      </el-col>
    </el-row>

    <!-- 模态框组件 -->
    <NewUserModal ref="NewUserModalRef" />
    <EditUserModal ref="EditUserModalRef" />
    <NewRoleModal ref="NewRoleModalRef" />
    <EditRoleModal ref="EditRoleModalRef" />
    <RoleManagementModal ref="RoleManagementModalRef" />
    <RolePermissionModal ref="RolePermissionModalRef" />
    <AddCourseModal ref="AddCourseModalRef" />
    <EditCourseModal ref="EditCourseModalRef" />
    <NewAssessmentModal ref="NewAssessmentModalRef" />
    <QuestionBankModal ref="QuestionBankModalRef" />
    <NewPlanModal ref="NewPlanModalRef" />
    <EditPlanModal ref="EditPlanModalRef" />
    <ViewPlanModal ref="ViewPlanModalRef" />
    <TemplateModal ref="TemplateModalRef" />
    <LogDetailModal ref="LogDetailModalRef" />
    <PostDetailModal ref="PostDetailModalRef" />
    <ErrorReportModal ref="ErrorReportModalRef" />
    <SubmitConfirmModal ref="SubmitConfirmModalRef" />
    <FilterModal ref="FilterModalRef" />
  </div>
</template>

<script setup>
import { ref } from "vue";

// Admin Modals
import NewUserModal from "./alert/admin/NewUserModal.vue";
import EditUserModal from "./alert/admin/EditUserModal.vue";
import NewRoleModal from "./alert/admin/NewRoleModal.vue";
import EditRoleModal from "./alert/admin/EditRoleModal.vue";
import RoleManagementModal from "./alert/admin/RoleManagementModal.vue";
import RolePermissionModal from "./alert/admin/RolePermissionModal.vue";
import EditCourseModal from "./alert/admin/EditCourseModal.vue";
import NewAssessmentModal from "./alert/admin/NewAssessmentModal.vue";
import QuestionBankModal from "./alert/admin/assessment/QuestionBankModal.vue";
import NewPlanModal from "./alert/admin/NewPlanModal.vue";
import ViewPlanModal from "./alert/admin/ViewPlanModal.vue";
import TemplateModal from "./alert/admin/TemplateModal.vue";
import LogDetailModal from "./alert/admin/LogDetailModal.vue";
import AddCourseModal from "@/components/alert/admin/AddCourseModal.vue";

// Exam Modals
import ErrorReportModal from "./alert/exam/ErrorReportModal.vue";
import SubmitConfirmModal from "./alert/exam/SubmitConfirmModal.vue";

// Training Plan Modals
import FilterModal from "./alert/training_plan/FilterModal.vue";

// Refs for each modal
const NewUserModalRef = ref(null);
const EditUserModalRef = ref(null);
const NewRoleModalRef = ref(null);
const EditRoleModalRef = ref(null);
const RoleManagementModalRef = ref(null);
const RolePermissionModalRef = ref(null);
const AddCourseModalRef = ref(null);
const EditCourseModalRef = ref(null);
const NewAssessmentModalRef = ref(null);
const QuestionBankModalRef = ref(null);
const NewPlanModalRef = ref(null);
const EditPlanModalRef = ref(null);
const ViewPlanModalRef = ref(null);
const TemplateModalRef = ref(null);
const LogDetailModalRef = ref(null);
const PostDetailModalRef = ref(null);
const ErrorReportModalRef = ref(null);
const SubmitConfirmModalRef = ref(null);
const FilterModalRef = ref(null);

const openModal = (modalName) => {
  const modalRef = eval(`${modalName}Ref.value`);
  if (modalRef && typeof modalRef.open === "function") {
    // For modals that require data, pass dummy data
    let dummyData = {};
    switch (modalName) {
      case "EditUserModal":
        dummyData = {
          username: "testuser",
          email: "test@example.com",
          fullName: "测试用户",
          phone: "13800138000",
          role: "user",
          department: "nursing",
          position: "护士",
          status: "active",
        };
        break;
      case "EditRoleModal":
        dummyData = {
          id: 1,
          name: "测试角色",
          description: "这是一个测试角色",
        };
        break;
      case "ViewPlanModal":
        dummyData = {
          name: "测试计划",
          type: "入职培训",
          startDate: "2023-01-01",
          endDate: "2023-01-31",
          description: "这是一个测试培训计划",
          courses: ["课程A", "课程B"],
          assessments: ["考核A"],
          participants: ["参与者A", "参与者B"],
          completionRate: 50,
          status: "进行中",
        };
        break;
      case "LogDetailModal":
        dummyData = {
          logId: "LOG001",
          time: "2023-10-27 10:00:00",
          user: "管理员",
          role: "admin",
          type: "登录",
          ip: "192.168.1.1",
          device: "Chrome on Windows",
          status: "成功",
          content: "用户成功登录系统。",
          data: { userId: 1, username: "admin" },
        };
        break;
      case "PostDetailModal":
        dummyData = {
          title: "测试帖子标题",
          author: "测试作者",
          avatar: "https://via.placeholder.com/48",
          time: "2023-10-27 11:00:00",
          content: "<p>这是测试帖子内容。</p>",
          images: [
            "https://via.placeholder.com/300",
            "https://via.placeholder.com/300",
          ],
        };
        break;
      case "ErrorReportModal":
        dummyData = { errorType: "1", errorDescription: "测试问题描述" };
        break;
      case "SubmitConfirmModal":
        dummyData = { message: "您确定要提交吗？" };
        break;
      case "FilterModal":
        dummyData = {
          trainingTypes: [],
          timeRange: "",
          customStartDate: "",
          customEndDate: "",
        };
        break;
      default:
        break;
    }
    modalRef.open(dummyData);
  } else {
    console.error(
      `Modal ${modalName} not found or does not have an open method.`,
    );
  }
};
</script>

<style scoped>
.modal-viewer-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

p {
  text-align: center;
  margin-bottom: 30px;
  color: #666;
}

.button-grid .el-col {
  margin-bottom: 20px;
}

.button-grid .el-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
}
</style>
